<template>
     <a-modal :visible="state.visible" title="新增活动页" @cancel="handleCancel" @ok="handleOk" width="100%"
        wrapClassName="full-modal">
        <a-form ref="formRef" :model="state.formData" :labelCol="{style:'width:100px'}">
            <a-form-item label="页面标题" name="title" :rules="[{required:true,message:'必填'}]">
                <a-input style="width: 400px;" v-model:value="state.formData.title"></a-input>
            </a-form-item>
            <a-form-item label="页面描述" name="description">
                <a-input style="width: 400px;" v-model:value="state.formData.description"></a-input>
            </a-form-item>
            <a-form-item label="页面组件配置" name="jsonAttr" :rules="[{required:true,message:'必填'}]">
                <div class="json-attr-wrapper">
                    <div class="json-attr-container">
                        <template v-for="(attr,index) in state.formData.jsonAttr">
                            <img :class="{'active-img':state.currentAttr == attr}" 
                             :src="attr.src"
                              :width="attr.width"
                              :height="attr.height" 
                              @click="handleImgClick(attr)">
                        </template>
                    </div>
                    <div style="margin-left: 20px;flex: 1;">
                        <div style="margin-bottom: 20px;border-bottom: 1px solid #ddd;display: flex;gap:10px">
                            <a-button style="margin-bottom: 20px;" type="primary" @click="pushAttr">添加图片到页面</a-button>
                            <a-button style="margin-bottom: 20px;" @click="removeAttr">移除图片</a-button>
                        </div>
                        <a-form v-if="state.currentAttr" ref="childFormRef" :model="state.currentAttr" :labelCol="{style:'width:80px'}">
                            <a-form-item label="图片连接">
                                <UploadImage v-model:value="state.currentAttr.src"></UploadImage>     
                            </a-form-item>
                            <a-form-item label="图宽">
                                <a-input-number style="width: 400px;" v-model:value="state.currentAttr.width" :min="1" :max="375" :step="10"></a-input-number>
                            </a-form-item>
                            <a-form-item label="图高">
                                <a-input-number  style="width: 400px;" v-model:value="state.currentAttr.height" :min="100" :step="10"></a-input-number>
                            </a-form-item>
                            <a-form-item label="点击连接">
                                <a-input  style="width: 400px;" v-model:value="state.currentAttr.link"></a-input>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </a-form-item>
        </a-form>
      </a-modal>  
</template>
<script lang="ts" setup>
import { reactive,ref,nextTick,onMounted } from "vue";
import { ActivityPageTypes } from "@/type"
import UploadImage from "@/components/UploadImage/UploadImage.vue";
import { ActivityPageService } from "@/service";
import _ from "lodash";


type currentDataType = Partial<Omit<ActivityPageTypes.ActityItemItem,"jsonAttr">> &{
        jsonAttr?:string
    }
const props = withDefaults(defineProps<{
    currentData?:currentDataType;
}>(),{
    currentData:():currentDataType=>({})
})


const state = reactive<{
    visible: boolean;
    formData:Partial<ActivityPageTypes.ActityItemItem>,
    currentAttr:Partial<ActivityPageTypes.IJsonAttr> | null
}>({
    visible:true,
    formData:{
        jsonAttr:[]
    },
    currentAttr: null
})
const formRef = ref();
const childFormRef = ref();

const emit = defineEmits<{
    (e:"ok"):void,
    (e:"cancel"):void
}>()

onMounted(()=>{
    state.formData = _.omit(props.currentData,"jsonAttr");
    state.formData.jsonAttr = props.currentData.jsonAttr?JSON.parse(props.currentData.jsonAttr):[]
})


const handleCancel = ()=>{
    emit("cancel")
}

const handleOk = ()=>{
    formRef.value.validateFields().then(async(valid:boolean)=>{
        if(valid){
            let formData:any = _.cloneDeep(state.formData);
            formData.jsonAttr = JSON.stringify(formData.jsonAttr);
            let res 
            if(formData.id){
                res= await ActivityPageService.updateActivityPage(formData);
            }else{
                res= await ActivityPageService.addActivityPage(formData);
            }

            if(res.code===0){
                emit("ok")
            }
        }
    })
}

const handleImgClick = (attr:ActivityPageTypes.IJsonAttr)=>{
    state.currentAttr = attr;
}

const pushAttr = ()=>{
    let attr:ActivityPageTypes.IJsonAttr={
        type:"img",
        src:"https://static-cse.canva.cn/blob/239388/e1604019539295.e502a758.avif",
        width:375,
        height:200
    }
    state.formData.jsonAttr?.push(attr);
    state.currentAttr = attr;
    nextTick(()=>{
        formRef.value.validate(["jsonAttr"]);
    })
}

const removeAttr = ()=>{
    console.log("state.currentAttr--->",state.currentAttr)
    if(state.currentAttr){
        const index:number|undefined = state.formData.jsonAttr?.indexOf(state.currentAttr as ActivityPageTypes.IJsonAttr);
        if(index!=undefined && index>-1){
            state.formData.jsonAttr?.splice(index,1)
        };
    };
   
}
</script>
<style lang="less" scoped>
.json-attr-wrapper{
    display: flex;
}

.json-attr-container{
    width: 375px;
    height: 675px;
    overflow-y: auto;
    background-color: #e5e5e5;
}

.json-attr-container img{
    cursor: pointer;
}

.active-img{
    border: 2px solid #7546c9;
}
</style>